<template xmlns:>
    <f7-page>
        <f7-navbar>
            <div  @click="$f7router.back()">
                <f7-nav-left>
                    <f7-icon f7="chevron_left"></f7-icon>
                    <span class="Back"> 返回</span>
                </f7-nav-left>
            </div>
        </f7-navbar>


        <div class="changePage">
            <ul>
                <li>
                    企业LOGO
                </li>
                <li @click="opendBtn()">
                    企业昵称<span>{{businessSt.nick_name}}</span>
                </li>
                <li>
                    开通行业<span v-for="item in businessSt.transport">{{item|typeName()}}</span>
                </li>
            </ul>
        </div>


        <f7-popup :opened="myPop" class="popover">
                <div>
                    <div>
                        <h4>修改公司名</h4>
                        <div>
                            <input type="text" placeholder="请输入" v-model="businessSt.nick_name" />
                        </div>
                    </div>

                    <f7-link @click="changeBtn()">确定</f7-link>
                    <f7-link @click="closeBtn()">关闭</f7-link>
                </div>
        </f7-popup>
    </f7-page>
</template>

<script>
    import F7Page from "framework7-vue/src/components/page";
    import F7Link from "framework7-vue/src/components/link";
    import F7Popup from "framework7-vue/src/components/popup";
    import F7Popover from "framework7-vue/src/components/popover";

    export default {
        name: "businessSetting",
        components: {F7Popover, F7Popup, F7Link, F7Page},
        data(){
            return{
                myPop: false,
                businessSt:''
            }
        },
        methods:{
            async getBusinessSt(){
                this.businessSt = (await this.AccountService.getBusinessCard()).data.data
            },
            opendBtn(){
                this.myPop=true
            },
            closeBtn(){
                this.myPop=false
            },

            async changeBtn(){
                this.changeBtn=(await this.AccountService.changeCompany(this.businessSt)).data.data;
                this.myPop=false
                this.goBack({ force: true, ignoreCache: true })
            }
        },
        mounted(){
            this.getBusinessSt()
        }
    }
</script>

<style scoped>
.changePage ul{
    padding: 0;
    margin: 0;
}
.changePage ul li{
    padding-left: 20px;
    font-size: 18px;
    background: white;
    margin-bottom: 10px;
    line-height: 60px;
}
.changePage ul li span{
    float: right;
    margin-right: 10px;
    color: #999999;
    font-size: 16px;
}

.popover{
    width:100%;
    height: 30%;
    position: fixed;
    top:30%;
}
.popover h4{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px silver solid;
    line-height: 40px;
}
.popover input{
    font-size: 18px;
    border: 1px silver solid;
    text-align: center;
    height: 40px;
    width:300px;
    margin: 20px auto;
}
.popover a{
    color: #333;
    width: 50%;
    text-align: center;
    font-size: 24px;
    border-top: 1px silver solid;
    margin-top: 50px;
    line-height: 44px;
}
</style>